<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="600px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="120px" @keyup.enter.native="dataFormSubmit()">

            <el-form-item label="合同起止时间">
                <el-input v-model="start_end" placeholder="请输入" disabled />
            </el-form-item>

            <el-form-item label="续期至" prop="validDate">
                <el-date-picker v-model="temp.validDate" type="date" value-format="yyyy-MM-dd" placeholder="选择时间" clearable />
            </el-form-item>

            <el-form-item label="收费周期" prop="chargeType">
                <el-select v-model="temp.chargeType" placeholder="请选择">
                    <el-option v-for="(item, key) in chargeCycle" :key="key" :label="item" :value="key" />
                </el-select>
            </el-form-item>

            <el-form-item label="金额" prop="money">
                <el-input v-model="temp.money" type="number" placeholder="金额">
                    <el-button slot="append">元/月</el-button>
                </el-input>
            </el-form-item>

            <el-form-item label="收款账户" prop="accountId">
                <el-select v-model="temp.accountId" placeholder="请选择收款账户" @change="account_change">
                    <el-option v-for="item in account_options" :key="item.id" :label="item.accountName" :value="item.id" />
                </el-select>
            </el-form-item>

            <!-- <el-form-item label="备注" prop="remark">
                <el-input v-model="temp.remark" placeholder="备注" />
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { createAccount, updateAccount, getAccountList, renewalContract } from '@/api/assets'// 请求数据
import { toDate, date_utils } from '@/utils'
import { isNunberFloat } from '@/utils/validate'

import { contractType, chargeCycle } from '@/utils/enum'

export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '合同续期',
                update: '合同续期'
            }
            return textMap[type]
        }
    },
    data () {
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            start_end: '',
            temp: { // 表单数据
                id: '',
                validDate: '',//续期至
                chargeType: '1',//收费周期
                money: '',//金额
                accountId: '',//收款账户
                accountId_node: ''

            },
            rule: {
                validDate: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                money: [
                    {
                        required: true,
                        message: '不能为空'
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value && !isNunberFloat(value)) {
                                callback(new Error('只能输入至多含有两位小数的数字'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'change'
                    }
                ],
            },
            chargeCycle,
            account_options: [],//账户list
            upData: ''

        }
    },
    created () {
    },
    methods: {
        // 初始化
        init (status, param) {
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })
            this.getAccountList()
        },
        create () {
            this.resetTemp() // 清空表单
        },
        async update (param) {
            // console.log(param)
            this.upData = param
            let data = Object.assign({}, param)//从上一页带过来当前的数据
            // const { data, code } = await getParkDetails({}, param.id) // 从后台获取当前的的数据

            // 成功
            this.start_end = `${date_utils.formatDate(new Date(data.effectDate))}-${date_utils.formatDate(new Date(data.validDate))}`
            this.temp.id = data.id
            this.temp.validDate = ''
            this.temp.money = data.money
            this.temp.chargeType = data.chargeType.toString()
            //  validDate: '',//续期至
            // chargeType: '1',//收费周期
            // money: '',//金额
            // accountId: '',//收款账户
            // accountId_node: ''

        },
        // 新增数据清空表单数据
        resetTemp () {
            this.temp = {
                // id: '',
                // bankName: '',//银行名称
                // accountNumber: '',//	行账号
                // bankAddress: '',//开户行
                // accountName: '',//开户姓名
                // remark: ''
            }
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                const params = {
                    'id': this.temp.id || undefined,
                    'validDate': this.temp.validDate,//续期至
                    'chargeType': this.temp.chargeType,//收费周期
                    'money': this.temp.money,//金额
                    'accountId': this.temp.accountId_node.id,//收款账户
                    'accountBank': this.temp.accountId_node.bankName,//账户银行
                    'accountNumber': this.temp.accountId_node.accountNumber//账户号
                    // accountId_node:''
                }
                const textMap = {
                    create: renewalContract, // 新增
                    update: renewalContract // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        },
        //获取账户列表
        async getAccountList () {
            const res = await getAccountList()
            const { data, code, message } = res
            this.account_options = data
            let node = data.filter(item => {
                return item.id == this.upData.accountId
            })
            this.temp.accountId = node[0].id
            this.temp.accountId_node = node[0]
            console.log("账户", node[0])
            // accountId: "", //收款账户id
            // accountId_node: '',//收款账户节点
        },

        // ===>>>>>>>>>
        //选择账户
        account_change (e) {
            console.log(e, this.account_options)
            let info = this.account_options.filter(item => {
                return item.id == e
            })
            console.log("选择账户", info)
            this.temp.accountId_node = info[0]
        },
        park_change (e) {
            console.log(e)
        },
        handleAvatarSuccess (res, file) {
            this.temp.idcardPicFront = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload (file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 8;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }




    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}
.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
</style>
